<template>
	<view id='poster' class="poster-wrap">
		<view class="close" :style="{marginTop:platform == 'mpWx' ? '-100rpx':''}" @tap='close'>
			<uni-icons type='close' size='28' color='#fff'></uni-icons>
		</view>
		<view class="poster-con">
			<view class="poster-img">
				<image :src="share_url" mode="" show-menu-by-longpress="true"></image>
			</view>
			<view class="btn line_center" @click="download()">保存图片</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import baseImg from '../base-img/base-img.vue'
	export default {
		name:"poster",
		components:{
			baseImg
		},
		data() {
			return {
				platform:app.getPlatform(),
				share_url: ''
			};
		},
		created() {
			uni.$on('shareUrl',(data)=>{
				this.share_url = data
			})
	
		},
		methods:{
			// 下载图片
			download(){
				uni.downloadFile({
				  url: this.share_url,
				  success: (res) => {
					uni.saveImageToPhotosAlbum({
						//图片路径，不支持网络图片路径
						filePath: res.tempFilePath,
						success: (res) => {
							uni.hideLoading();
							setTimeout(()=>{
								return uni.showToast({
									title: "保存成功"
								});
							},1500)
							
						},
						fail: (res) => {
					
						},
						complete: (res) => {uni.hideLoading();},
					})
				
				  }
				
				});
			},
			close(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.poster-wrap{
		width:100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.close{
		width: 710rpx;
		display: flex;
		justify-content: flex-end;
	}
	.poster-con{
		width: 710rpx;
		height: 948rpx;
		margin-top:18rpx;
		position: relative;
		.poster-img{
			width: 710rpx;
			height: 100%;
			border-radius: 8rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.btn{
			width: 506rpx;
			height: 80rpx;
			background: $dis-font-color;
			position: absolute;
			bottom: -130rpx;
			left:0;
			right:0;
			margin:auto;
			z-index:222;
			color:#fff;
		}
	}

</style>